import { reactive, ref, onMounted, onBeforeUnmount, onUnmounted, watch } from 'vue';
import { useRoute } from 'vue-router';
import { useDebounceFn } from '@vueuse/core';
import 播音 from '@/amtf/utils/播音';
import *  as util from '@/amtf/utils'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 找label } from '@/amtf/utils';
import useApi from '@/amtf/api/增查api';
import { use取插件id } from '@/amtf/hooks/hook';
import { useRouter } from 'vue-router'
import use路由 from '@/amtf/hooks/use路由';

// import use取选项集 from '@/amtf/取字段候选值集';
export default function (cfg = {}) {
  console.log(`uselist执行 ing👇`)
  const api = useApi(cfg.url);
  const { 插件id, 组件id } = use取插件id();
  const router = useRouter()

  // console.log(`cfg 👉`, cfg)
  const 单项组 = reactive([])
  const 搜索ref = ref()
  // 如果把ref嵌套到对象中，调用时无法作为ref使用
  const 单项ref = ref('')

  let 监听变化 = true

  const a = reactive({
    showAllQuery: false,
    筛选组: [],
    默认排序: { prop: 'UpdatedAt', order: 'descending' },
    选中组: [],
    字段候选值集: {},
    可选页面容量: [5, 10, 30, 50, 100],
    total: 1,
  })
  if (cfg.a) {
    Object.assign(a, cfg.a)
  }

  // 查询参数👇
  const req = reactive({
    筛选组: [],
    多字段搜索字段名s: ["姓名", "部门.名称"],
    多字段搜索关键词: "",
    page: 1,
    pageSize: 10,
    searchInfo: {},
    树结构: false,
    sort: a.默认排序.prop,
    order: a.默认排序.order
  })
  if (cfg.req) {
    Object.assign(req, cfg.req)
  }

  const 树设置 = reactive({
    标签: {
      value: 'id',
      label: '名称',
    },
    级联选择: {
      checkStrictly: true,
      expandTrigger: 'hover',
      emitPath: false,
    }
  })
  if (cfg.树设置) {
    Object.assign(树设置, cfg.树设置)
  }

  const 筛选设置 = reactive({
    比较运算符: ["=", "like", "in"],
    字段名: ["名称"],
    模板: {
      字段名: "姓名",
      比较运算符: "like",
      字段值: "",
    }
  })
  if (cfg.筛选设置) {
    Object.assign(筛选设置, cfg.筛选设置)
  }

  function 外部传值筛选(arr) {
    util.数组重予(a.筛选组, arr)
    提交筛选()
  }

  function 增筛选() {
    a.筛选组.unshift(util.深拷贝(筛选设置.模板))
  }
  function 提交筛选() {
    req.筛选组 = util.深拷贝(a.筛选组)
  }
  function 删筛选() {
    a.筛选组.length = 0
    提交筛选()
  }

  const 增 = async (row = null) => {
    ElMessageBox.confirm('确定要删除吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      if (row) {
        await 删单个(row)
      } else {
        await 删多个()
      }
      播音('删除')
      查多个()
    }
    ).catch(() => { })
  }

  const 删 = async (row = null) => {
    ElMessageBox.confirm('确定要删除吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      if (row) {
        await 删单个(row)
      } else {
        await 删多个()
      }
      播音('删除')
      查多个()
    }
    ).catch(() => { })
  }

  const 删多个 = async () => {
    // console.log(`删多个 ing👇`)
    const ids = []
    a.选中组 && a.选中组.map(item => {
      ids.push(item.id)
    })
    const res = await api.删({ ids })
    if (res.code === 0) {
      ElMessage({
        type: 'success',
        message: '删除成功'
      })
      // 如果是删除一整页，要换页码
      if (单项组.length === ids.length && req.page > 1) {
        req.page--
      }
    }
  }

  const 删单个 = async (row) => {
    // console.log(`删单个 row 👉`, row)
    const res = await api.删({ id: row.id })
    if (res.code === 0) {
      ElMessage({
        type: 'success',
        message: '删除成功'
      })
      if (单项组.length === 1 && req.page > 1) {
        req.page--
      }
    }
  }

  const 查多个 = async () => {
    const req2 = { ...req, 筛选组: JSON.stringify(req.筛选组) };
    const res = await api.查(req2)
    console.log(`查多个 res 👉`, res)
    if (res.code === 0) {
      // console.log(`查多个 单项组 👉`, 单项组)
      if (req.树结构) {
        let 添加顶层 = util.深拷贝(res.data.list[0])
        添加顶层.id = 0
        添加顶层[树设置.label] = "全部"
        添加顶层.children = res.data.list
        res.data.list = [添加顶层]
      }
      util.数组重予(单项组, res.data.list)
      a.total = res.data.total
      // req.page = res.data.page
      // req.pageSize = res.data.pageSize
    }
  }

  const 查单个 = async () => {
    const res = await api.查({ id: row.id })
    if (res.code === 0) {
      单项.value = res.data
    }
  }
  查多个()

  // 多选
  const 选中变了 = (val) => {
    a.选中组 = val
  }

  watch(req, (newValue, oldValue) => {
    console.log(`req 变化了 👉`, req)
    if (监听变化) {
      查多个()
    }
    监听变化 = true
  })

  // 分页
  const 改单页条数 = (val) => {
    req.pageSize = val
    查多个()
  }

  // 重置
  const onReset = () => {
    a.searchInfo = {}
    查多个()
  }

  const sortChange = ({ prop, order }) => {
    const sortMap = {
      UpdatedAt: 'UpdatedAt',
    }

    let sort = sortMap[prop]
    if (!sort) {
      sort = prop.replace(/[A-Z]/g, match => `_${match.toLowerCase()}`)
    }

    a.searchInfo.sort = sort
    a.searchInfo.order = order
    查多个()
  }

  const 跳转页面 = (val) => {
    req.page = val
    查多个()
  }

  const 查询 = () => {
    搜索ref.value?.validate(async (valid) => {
      if (!valid) return
      req.page = 1
      req.pageSize = 10
      查多个()
    })
  }

  const 取字段候选值集 = async () => {
    try {
      const res = await api.查字段候选值集()
      // console.log(`查字段候选值集 res 👉`, res)
      if (res.code === 0) {
        a.字段候选值集 = res.data
      }
    } catch (error) {
      console.log(`error 👉`, error)
    }
  }
  取字段候选值集()

  const 取字段显示值 = (单项, 字段) => {
    // console.log(`单项 👉`,单项)
    const res = 找label(a.字段候选值集[字段], 单项[字段])
    return res
  }

  function 跳转单独详情页(单项) {
    router.push({ name: '项目管理/项目明细/详情', query: { id: 单项.id } })
    return true
  }

  const 路由 = use路由();
  function 视图切换() {
    if (路由.a.当前页类型 == '列表') {
      router.push({ name: '项目管理/项目信息/看板' })
    } else {
      router.push({ name: '项目管理/项目信息/list' })
    }
    return true
  }

  return {
    视图切换,
    跳转单独详情页,
    外部传值筛选,
    删筛选,
    提交筛选,
    增筛选,
    req,
    筛选设置,
    树设置,
    增,
    插件id,
    组件id,
    取字段显示值,
    取字段候选值集,
    onReset,
    跳转页面,
    改单页条数,
    sortChange,
    查询,
    选中变了,
    搜索ref,
    删,
    查单个,
    单项ref,
    a,
    单项组,
    查多个
  }
}